@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background #ffffff
  overflow-x hidden
  .exchange-wrapper
    padding-top computedNum(52)
    .header
      background rgb(252,252,252)
      width computedNum(335)
      height computedNum(50)
      line-height computedNum(50)
      z-index 9
      padding computedNum(0) computedNum(20)
      font-size 0
      position fixed
      top 0
      left 0
      .back-wrapper
        width computedNum(60)
        height computedNum(50)
        padding-left computedNum(15)
        background url("../img/back-icon.png") no-repeat left center
        background-size computedNum(8.5) computedNum(15)
        font-size computedNum(16)
        font-family SimHei
      .title
        width computedNum(185)
        font-size computedNum(16)
        vertical-align top
        font-family SimHei
      .exchange-recode-btn
        width computedNum(75)
        vertical-align top
        font-size computedNum(16)
        font-family SimHei
        color #666666
    .my-asset-wrapper
      font-size 0
      .my-coin-wrapper
        width computedNum(187)
        .coin-wrapper
          font-size computedNum(34)
          color #e69311
          height computedNum(80)
          line-height computedNum(80)
      .my-gift-wrapper
        width computedNum(187)
        border-left computedNum(1) solid #e4e4e4
        .gift-wrapper
          font-size computedNum(34)
          color #e55252
          height computedNum(80)
          line-height computedNum(80)
      .title
        font-size computedNum(13)
        color #999999
        margin-bottom computedNum(20)
    .exchange-type-wrapper
      padding computedNum(30) computedNum(20)
      .exchange-type
        &.exchange-vip-wrapper
          background url("../img/exchange-vip-bg.png") no-repeat center center
          background-size computedNum(356) auto
        &.exchange-gift-wrapper
          margin-top computedNum(10)
          background url("../img/exchange-gift-bg.png") no-repeat center center
          background-size computedNum(356) auto
        font-size 0
        .left-wrapper
          height computedNum(108)
          width computedNum(167.5)
        .right-wrapper
          width computedNum(167.5)
          vertical-align top
          padding-top computedNum(25)
          .amount
            font-size computedNum(14)
            span
              color #e55252
          .btn
            background #fea821
            height computedNum(32)
            width computedNum(112)
            line-height computedNum(32)
            border-radius computedNum(20)
            color #ffffff
            font-size computedNum(14)
            margin-left computedNum(27.75)
            margin-top computedNum(10)
            &.disabled
              background #cccccc
    .exchange-mask
      position fixed
      top 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,0.6)
      z-index 10
      display none
      .exchange-mask-content
        position absolute
        bottom 0
        left 0
        width computedNum(375)
        height computedNum(220)
        background #ffffff
        .close-wrapper
          span
            height computedNum(50)
            width computedNum(60)
            background url("../img/close-gray.png") no-repeat center center
            background-size computedNum(15) auto
        .select-count-wrapper
          padding 0 computedNum(30)
          font-size 0
          margin-top computedNum(12)
          .select-count-tip
            width computedNum(158)
            font-size computedNum(17)
            vertical-align top
          .select-count-box
            width computedNum(157)
            font-size 0
            span
              font-size computedNum(25)
              width computedNum(34)
              height computedNum(34)
              line-height computedNum(34)
              text-align center
              border-1px-all(#d6d6d6)
            .num-wrapper
              width computedNum(88)
        .get-wrapper
          padding computedNum(20) computedNum(30) computedNum(32) computedNum(30)
          font-size computedNum(14)
          color #666
          .get-count
            color #f14a4a
            font-size computedNum(18)
        .cost-wrapper
          font-size 0
          .cost-detail
            width computedNum(215)
            height computedNum(50)
            line-height computedNum(50)
            padding-left computedNum(30)
            font-size computedNum(13)
            .cost-count
              color #f14a4a
          .confirm-btn
            width computedNum(130)
            height computedNum(50)
            line-height computedNum(50)
            background #f14a4a
            color #ffffff
            vertical-align top
            font-size computedNum(17)

